<template>
    <div class="pageBox">
        <div class="top">
            <p>广告列表</p>
            <a-radio-group :value="size" @change="handleSizeChange">
                <a-radio-button value="0">全部</a-radio-button>
                <a-radio-button value="1">已下架</a-radio-button>
                <a-radio-button value="2">已上架</a-radio-button>
            </a-radio-group>
            <a-input-search
                    placeholder="广告名称"
                    style="width: 240px;marginLeft:10px"
                    v-model='listGets.name'
                    enterButton
                    @search="getlist()"
            />
        </div>
        <div type="primary" @click="showModal('添加广告')" class="addApplication" v-if="listButton.addition">+ 添加</div>
        <div style="padding:10px 0">
            <ul class="advert">
                <li class="advertList" v-for="(v,i) of listDate" :key="i">
                    <div class="img"><img :src="v.inner_url" alt="#"></div>
                    <div class="item titleBox">
                        <p style="color: #000000d8;font-weight:600">{{v.name}}</p>
                        <p class="content">{{v.description}}</p>
                    </div>
                    <div class="item type">
                        <p>类型</p>
                        <p>{{v.type}}</p>
                    </div>
                    <div class="item">
                        <p>状态</p>
                        <p><i :class="v.status=='已下架'?'icon':'underway'"></i>{{v.status}}</p>
                    </div>
                    <div class="item">
                        <p>开始时间</p>
                        <p>{{v.create_date}}</p>
                    </div>
                    <div class="action">
                        <span @click="adAlert('修改广告',v.id)">{{listButton.editor}}</span> |
                        <span @click="remove(v.id)">{{listButton.cancel}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="paging">
            <div class="total">共 {{total}} 条记录 第 {{listGets.pageSize}} / {{allPage}} 页</div>
            <a-pagination
                    showQuickJumper
                    showSizeChanger
                    :defaultCurrent="1"
                    :defaultPageSize="listGets.limit"
                    :total=total
                    @change="onChange"
            />
        </div>
        <!-- 模态框 -->
        <a-modal
                :title="title"
                destroyOnClose
                :visible="visible"
                @ok="handleOk"
                :confirmLoading="confirmLoading"
                @cancel="handleCancel"
                width="520px"
                okText="确定"
                cancelText="取消"
        >
            <div class="drop-down">
                <div class="drop-down-lf">
                    广告类型：
                    <a-select :defaultValue="modalData.type ==''?'请选择':modalData.type" style="width: 120px"
                              @change="handleChange">
                        <a-select-option value="1">头条资讯</a-select-option>
                        <a-select-option value="2">应用页广告</a-select-option>
                        <a-select-option value="3">闪屏页广告</a-select-option>
                        <a-select-option value="4">首页广告</a-select-option>
                    </a-select>
                </div>
                <div class="drop-down-rg">
                    当前状态：
                    <a-select :defaultValue="modalData.status ==''?'请选择':modalData.status" style="width: 120px"
                              @change="current">
                        <a-select-option value="1">已下架</a-select-option>
                        <a-select-option value="2">已上架</a-select-option>
                    </a-select>
                </div>
            </div>
            <div class="designation">
                广告名称：
                <a-input class="designationIpt" v-model="modalData.name" placeholder="请输入"/>
            </div>
            <div class="connect">
                链接：
                <a-input class="connectIpt" v-model="modalData.out_url" placeholder="请输入"/>
            </div>
            <div class="designation upload">
                上传附件：
                <a-upload
                        action="/kmd-field-web/adm/uploadImage"
                        @change='callBack'
                >
                    <a-button>
                        <a-icon type="upload"/>
                        上传文件
                    </a-button>
                </a-upload>
                <p>支持扩展名：.jpg .png (规格：640x200)...</p>
            </div>
            <div class="connect describe">
                描述：
                <a-textarea class="describe" v-model="modalData.description" placeholder="请输入至少五个字符"
                            :autosize="{ minRows: 2, maxRows: 6 }"/>
            </div>
        </a-modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                size: "0",
                visible: false, //模态框是否显示
                confirmLoading: false,
                modalData: {
                    name: "", //广告名称
                    description: "", //描述
                    type: "", //广告类型
                    status: "", //广告状态
                    out_url: "",//广告连接
                    inner_url: '',//图片链接
                    id: '',
                },
                defaultFileList: [], //图片数据
                title: "新建广告",
                listGets: {
                    limit: 10,
                    pageSize: 1,
                    status: "",
                    name: ""
                },
                total: null, //总条数
                allPage: "",
                listDate: [], //广告列表数据
                underway: false, //状态样式
                isRemove: false,
                fileList: null,
                adAlertId: '',
                listButton: {
                    addition: "",
                    editor: "",
                    cancel: ""
                }//按钮数据
            };
        },
        created() {
            let titleName = sessionStorage.getItem("stairH1");
            this.$ajax.get("/kmd-field-web/admin/queryBtn", {params: {"title": titleName.trim()}}).then(res => {
                for (var i = 0; i < res.data.list.length; i++) {
                    if (res.data.list[i].title == "添加") {
                        this.listButton.addition = res.data.list[i].title
                    }
                    if (res.data.list[i].title == "编辑") {
                        this.listButton.editor = res.data.list[i].title
                    }
                    if (res.data.list[i].title == "删除") {
                        this.listButton.cancel = res.data.list[i].title
                    }
                }
            })

            this.getlist();
        },
        methods: {
            handleSizeChange(e) {
                //顶部状态搜索
                this.size = e.target.value;
                this.listGets.status = this.size;
                if (e.target.value == "0") {
                    this.listGets.status = "";
                }
                this.getlist();
            },

            showModal(title) {
                //点击显示模态框
                this.modalData.name = "";
                this.modalData.description = "";
                this.modalData.type = "";
                this.modalData.status = "";
                this.modalData.out_url = "";
                this.title = title;
                this.visible = true;
            },
            adAlert(title, id) {
                //编辑广告打开对话框
                this.title = title;
                this.adAlertId = id
                this.$ajax
                    .get("/kmd-field-web/adm/singleDetailAdvertisement", {
                        params: {advertisementId: id}
                    })
                    .then(res => {
                        this.modalData.name = res.data.name;
                        this.modalData.description = res.data.description;
                        this.modalData.type = res.data.type;
                        this.modalData.status = res.data.status;
                        this.modalData.out_url = res.data.out_url;
                        this.modalData.inner_url = res.data.inner_url
                        if (this.modalData.type == 1) {
                            this.modalData.type = "头条资讯";
                        } else if (this.modalData.type == 2) {
                            this.modalData.type = "应用页广告";
                        } else if (this.modalData.type == 3) {
                            this.modalData.type = "闪屏页广告";
                        } else {
                            this.modalData.type = "首页广告";
                        }

                        if (this.modalData.status == 1) {
                            this.modalData.status = "已下架";
                        } else {
                            this.modalData.status = "已上架";
                        }
                        this.visible = true;
                        this.getlist();
                    });
            },
            remove(id) {//删除广告
                let that = this;
                this.$confirm({
                    title: "警告",
                    content: "您确定要删除?",
                    onOk() {
                        that.$ajax
                            .get("/kmd-field-web/adm/deleteAdvertisement", {
                                params: {advertisementId: id}
                            })
                            .then(res => {
                                if (res.data.statusCode == 200) {
                                    that.$message.success('删除成功!')
                                    that.getlist()
                                } else {
                                    that.$message.error('删除失败')
                                }
                            })
                            .catch(error => {
                                that.$message.error('服务器繁忙,请稍后重试!');
                            })
                    }
                });
            },
            callBack(info) {//上传图片的回调
                if (info.file.status === 'done') {
                    this.modalData.inner_url = info.file.response.fileName
                }
            },
            handleOk(e) {//模态框确定事件
                if (this.title == "添加广告") {
                    //判空
                    if (this.modalData.name == '') {
                        this.$message.warning('广告名称不能为空!');
                        return
                    }
                    if (this.modalData.description == '') {
                        this.$message.warning('广告描述不能为空!');
                        return
                    }
                    if (this.modalData.type == '') {
                        this.$message.warning('广告类型不能为空!');
                        return
                    }
                    if (this.modalData.status == '') {
                        this.$message.warning('广告状态不能为空!');
                        return
                    }
                    if (this.modalData.out_url == '') {
                        this.$message.warning('广告链接不能为空!');
                        return
                    }
                    if (this.modalData.inner_url == '') {
                        this.$message.warning('广告图片不能为空!');
                        return
                    }

                    this.$ajax.post("/kmd-field-web/adm/addAdvertisement", this.modalData)
                        .then(res => {
                            if (res.data.statusCode == 200) {
                                this.$message.success('添加广告成功!')
                                this.visible = false
                                this.getlist();
                            } else {
                                this.$message.error(res.data.message)
                            }
                        })
                        .catch(err => {
                            this.$message.error('服务器繁忙,请稍后重试!')
                            this.visible = false
                        })
                    this.getlist()
                } else {
                    this.modalData.id = this.adAlertId
                    if (this.modalData.type == "头条资讯") {
                        this.modalData.type = 1;
                    } else if (this.modalData.type == "应用页广告") {
                        this.modalData.type = 2;
                    } else if (this.modalData.type == "闪屏页广告") {
                        this.modalData.type = 3
                        ;
                    } else {
                        this.modalData.type = 4;
                    }

                    if (this.modalData.status == "已下架") {
                        this.modalData.status = 1;
                    }
                    if (this.modalData.status == "已上架") {
                        this.modalData.status = 2;
                    }
                    this.$ajax.post("/kmd-field-web/adm/editAdvertisement", this.modalData)
                        .then(res => {
                            if (res.data.statusCode == 200) {
                                this.$message.success('修改广告成功!')
                                this.visible = false
                            } else {
                                this.$message.error(res.data.message)
                                this.visible = false
                            }
                        })
                        .catch(err => {
                            this.$message.error('服务器繁忙,请稍后重试!')
                            this.visible = false
                        })
                    this.getlist()
                }
            },

            handleCancel(e) {//模态框取消事件
                this.visible = false;
            },

            handleChange(value) { //广告类型下拉框
                this.modalData.type = value;
            },

            current(value) {//广告状态下拉框
                this.modalData.status = value;
            },

            onChange(pageNumber, limit) {
                // 分页跳转
                this.listGets.pageSize = pageNumber;
                this.listGets.limit = limit;
                this.getlist();
            },
            getlist() {
                //获取广告列表数据
                this.$ajax
                    .get("/kmd-field-web/adm/listAdvertisement", {params: this.listGets})
                    .then(res => {
                        this.listDate = res.data.records;
                        this.total = res.data.total;
                        this.allPage = Math.ceil(this.total / this.listGets.limit);
                        //处理数据
                        for (let i of this.listDate.keys()) {
                            if (this.listDate[i].type == 1) {
                                this.listDate[i].type = "头条资讯";
                            } else if (this.listDate[i].type == 2) {
                                this.listDate[i].type = "应用页广告";
                            } else if (this.listDate[i].type == 3) {
                                this.listDate[i].type = "闪屏页广告";
                            } else {
                                this.listDate[i].type = "首页广告";
                            }

                            if (this.listDate[i].status == 1) {
                                this.underway = false;
                                this.listDate[i].status = "已下架";
                            } else {
                                this.underway = true;
                                this.listDate[i].status = "已上架";
                            }
                        }
                    });
            }
        }
    };
</script>

<style scoped lang='less'>
    .top {
        display: flex;
        align-items: center;
        p {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
        }
    }

    .addApplication {
        width: 100%;
        height: 32px;
        border: 1px dashed #e8e8e8;
        text-align: center;
        line-height: 32px;
        border-radius: 8px;
        margin-top: 40px;
        &:hover {
            cursor: pointer;
        }
    }

    .advert {
        //广告列表
        .advertList {
            display: flex;
            align-items: center;
            height: 80px;
            padding: 20px;
            font-size: 14px;
            color: #00000072;
            border-bottom: 1px solid #ccc;
            .img {
                height: 48px;
                width: 48px;
                margin-right: 10px;
                background: #eee;
                overflow: hidden;
            }
            .item {
                padding-right: 140px;
                .icon {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #ccc;
                    margin-right: 6px;
                }
                .underway {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    margin-right: 6px;
                    background: #0e77d1;
                }
            }
            .type {
                justify-content: flex-start;
                width: 270px;
            }
            .titleBox {
                flex: 1;
                text-align: left;
                .content {
                    max-width: 500px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .action {
                span {
                    color: #00f;
                    &:hover {
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    //模态框
    .drop-down {
        display: flex;
        .drop-down-lf {
            flex: 1;
        }
        .drop-down-lf {
            flex: 1;
        }
    }

    .designation {
        margin-top: 15px;
        .designationIpt {
            width: 238px;
        }
    }

    .upload {
        p {
            padding-left: 70px;
            color: #00000072;
        }
    }

    .describe {
        display: flex;
        align-items: flex-start;
    }

    .connect {
        margin-top: 15px;
        padding-left: 25px;
        .connectIpt {
            width: 320px;
        }
        p {
            margin-left: 43px;
            color: rgba(0, 0, 0, 0.5);
        }
        .describe {
            width: 401px;
            height: 82px;
        }
    }

    .topSearch {
        float: right;
        height: 40px;
    }

    .lists {
        margin-top: 35px;
        width: 100%;
        .lists_lf {
            display: flex;
            .lists_img {
                width: 48px;
                height: 48px;
                background: red;
            }
            .lists_caption {
                width: 500px;
                margin-left: 26px;
            }
            .lists_type {
                flex: 1;
                line-height: 5px;
                margin-top: 20px;
                margin-left: 90px;
            }
            .lists_status {
                flex: 1;
                line-height: 5px;
                margin-top: 20px;
                margin-left: 90px;
                .lists_await {
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #bfbfbf;
                    margin-bottom: 2px;
                    margin-right: 5px;
                }
            }
            .lists_time {
                line-height: 5px;
                margin-top: 20px;
                margin-left: 90px;
            }
            .lists_compile {
                flex: 1;
                margin-top: 20px;
                margin-left: 120px;
                width: 300px;
                color: blue;
            }
        }
    }
</style>
